<template>
  <div class="post-input">
    <div class="post-input-box">
      <div class="ps-text">
        <span>ps：点击标签+1</span>
        <span @click="cancelModal">取消</span>
      </div>
      <div class="tags-box">
        <Tag @updateTags="updateTagsAction" ref="commentTags" v-for="(item, index) in spliceCommentArr" :key="index" :tagItem="item" :itemIndex="index" isClick="true"></Tag>
      </div>
      <input type="text" class="input-text" placeholder="回车输入您的短评，可输入12个字" @confirm="updateTagsAction" v-model="inputContent" />
    </div>
  </div>
</template>

<script>
import Tag from '../../../components/tag/index'
import request from '../../../utils/request'
export default {
  data() {
    return {
      inputContent: undefined
    }
  },
  props: ['commentArr', 'artInfo'],
  components: { Tag },
  computed: {
    spliceCommentArr () {
      // 展示3个短评
      return this.commentArr.slice(0, 3)
    }
  },
  methods: {
    // mpvue的confirm相当于vue的@keyup.enter事件
    updateTagsAction(content) {
      request({
        url: 'book/add/short_comment',
        data: {
          book_id: this.artInfo.id,
          content: this.inputContent || content
        },
        method: 'post'
      }).then((result) => {
        // 直接修改spliceCommentArr，spliceCommentArr的数据会变，但是dom不会更新，所以直接修改原始数据
        this.commentArr.unshift({
          content: this.inputContent || content,
          nums: 1
        })
        // 重置输入框的内容
        this.inputContent = undefined
      })
    },
    cancelModal() {
      this.$emit('cancelPostModal')
    }
  },
};
</script>

<style scoped>
.post-input {
  position: fixed;
  bottom: 0;
  /* opacity 会把子元素一起变为透明 */
  background-color: rgba(0, 0, 0, 0.6);
  height: 100%;
  width: 100%;
}
.post-input-box {
  position: absolute;
  bottom: 0;
  width: 100%;
  background-color: #fff;
  padding: 20rpx 0;
}
.ps-text {
  font-size: 24rpx;
  padding: 0 20rpx;
  color: red;
  display: flex;
  justify-content: space-between;
}
.tags-box {
  display: flex;
  flex-wrap: wrap;
}
.input-text {
  border: 1px solid #eee;
  border-radius: 20px;
  width: 90%;
  height: 60rpx;
  font-size: 24rpx;
  padding: 0 20rpx;
  margin: 0 auto;
}
</style>